﻿@{
    ViewBag.Title = "统一界面";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Scripts{
    <script type="text/javascript">
        //全局变量
        var UserID = '@ViewBag.UserID'; //用户编码
        var UserWorkID = '@ViewBag.UserWorkID'; //用户工号
        var UserName = '@ViewBag.UserName'; //用户名

        var menuTreeData = [{ //菜单树数据
            id: "1",
            text: '人员信息',
            state: 'open', //closed
            checked: false,
            attributes: { url: "Map/mapView" },
            iconCls: 'icon-custom-cUser',
            children: []
        },
        //{
        //    id: "2",
        //    text: '任务信息',
        //    state: 'open', //closed
        //    checked: false,
        //    attributes: { url: "Task/TaskInfoList" },
        //    iconCls: 'icon-custom-cTask',
        //    children: []
        //},
        //{
        //    id: "3",
        //    text: '汇总信息',
        //    state: 'open', //closed
        //    checked: false,
        //    attributes: { url: "Summary/SummaryInfoPage" },
        //    iconCls: 'icon-custom-cSum',
        //    children: []
        //},
        //{
        //    id: "4",
        //    text: '统计信息',
        //    state: 'open', //closed
        //    checked: false,
        //    attributes: { url: "TJ/TJReportList" },
        //    iconCls: 'icon-custom-cTJ',
        //    children: []
        //},
        //{
        //    id: "5",
        //    text: '数据查询',
        //    state: 'open', //closed
        //    checked: false,
        //    attributes: { url: "Record/PatientRecordList" },
        //    iconCls: 'icon-custom-cSearch',
        //    children: []
        //}
        ]


        //文档加载完成执行
        $(document).ready(function () {
            //console.log(menuTreeData);

            //加载树控件  获取权限菜单
            $("#menuTree").tree({
                //url: "@Url.Content("~/Home/getMenuData")",
                data: menuTreeData,
                onClick: function (node) {
                    if (node.attributes.url.length > 0) {
                        newTab(node); //点击叶节点时，右侧追加一个tab显示对应页面
                    }
                    //2019-11-8 zch
                    var childNode = $('#menuTree').tree('getChildren', node.target); //获取子节点
                    //console.log(childNode);
                    if (childNode.length > 0) {  //如果有子节点
                        $('#menuTree').tree('toggle', node.target); //切换该节点的展开 / 折叠状态
                    }
                },
                //add2019-11-05 plq 双击节点时切换节点的展开/折叠状态
                onDblClick: function (node) {
                    //var childNode = $('#menuTree').tree('getChildren', node.target); //获取子节点
                    ////console.log(childNode);
                    //if (childNode.length > 0) {  //如果有子节点
                    //    $('#menuTree').tree('toggle', node.target); //切换该节点的展开 / 折叠状态
                    //}
                },
                onLoadSuccess: function (node, data) {
                    $("#menuTree").tree("collapseAll");
                },
                animate: true
            });
            $.setDivOnly("#divIndex");

            @*//添加一个新的标签页面板---进入系统后默认展示的首页--地图信息页
            var url = '@Url.Content("~/Map/mapView")'; //系统首页显示地图
            $("#tbs").tabs("add", {
                title: "地图信息",
                iconCls: 'icon-custom-cMap',
                content: "<iframe src='" + url + "' style='width:99.5%;height:99%;border:0px solid #000;background:#e9eef3'></iframe>",
                closable: false, //是否显示关闭按钮。
                fit: true, //当设置为 true 时，面板（panel）的尺寸就适应它的父容器
                selected: true, //选中
            });*@
            //添加一个新的标签页面板---进入系统后默认展示的首页
            var url = '@Url.Content("~/Home/FirstPage")'; //系统首页显示个人信息
            $("#tbs").tabs("add", {
                title: "系统首页",
                iconCls: 'icon-custom-Anke',
                content: "<iframe src='" + url + "' style='width:99.5%;height:99%;border:0px solid #000;background:#e9eef3'></iframe>",
                closable: false, //是否显示关闭按钮。
                fit: true, //当设置为 true 时，面板（panel）的尺寸就适应它的父容器
            });



        });
        //end

        //浏览器窗口尺寸调整时,外层布局容器尺寸对应调整
        $(window).resize(function () {
            $.setDivOnly("#divIndex");
        });


        //function:追加一个新的 Tab
        function newTab(treeNode) {
            var $tbs = $("#tbs");//获取tab容器
            //根据tab标签页的 标题 判断 是否已存在 同名tab
            if ($tbs.tabs("exists", treeNode.text)) {
                //判断当前选中的选项卡,是否和点击的树节点相同,若相同,则更新tab
                var currTab = $tbs.tabs('getSelected');//获取选中的标签页面板
                //获取当前选项卡的标题
                var currTitle = currTab.panel('options').title
                //拿当前标题 和 被点击的 树节点标题比较，如果相等，则要刷新
                if (currTitle == treeNode.text) {
                    $tbs.tabs('update', {
                        tab: currTab,//要更新的标签
                        options: {//设置更新标签要修改的属性
                            content: newIframe(treeNode.attributes.url)//重新加载iframe
                        }
                    });
                }
                $tbs.tabs("select", treeNode.text); //选中
            } else { //不存在同名tab,直接追加个新tab
                $tbs.tabs("add", {
                    title: treeNode.text,
                    iconCls: treeNode.iconCls,
                    content: newIframe(treeNode.attributes.url),
                    closable: true,
                    fit: true
                });
            }
        }

        //返回一个<iframe></iframe>标签  撑满子页面
        function newIframe(url) {
            url = '@Url.Content("~/")' + url;
            var ifrStr = "<iframe src='" + url + "' style='width:99.5%;height:99%;border:0px solid #000;background:#e9eef3'></iframe>";
            return ifrStr;
        }


        //退出登录
        function goLogin() {
            $.messager.confirm('退出系统', '是否确定要退出系统？', function (r) {
                if (r) {
                    $.ajax({
                        type: 'POST',
                        url: '@Url.Content("~/Home/ExitLogin")',
                        data:
                            {
                                YongHuMing: '@ViewBag.DengLuMing',
                            },
                        dataType: "json",
                        success: function (msg) {
                            //console.log(msg);
                            if (msg == "OK") { //退出登录相关操作成功
                                //add2019-12-02 plq 使用window.opener的时候要去判断父窗口的状态，否则若父窗口被关闭或者更新，就会出错
                                if (window.opener && !window.opener.closed) {
                                    window.opener.opener = null;
                                    window.opener.open("", "_self");
                                    window.opener.close(); //关闭源（父）窗口
                                }
                                //返回用户登录页
                                window.top.location.href = '@Url.Content("~/Home/UserLoginPage")'; //返回登录页
                            }
                        }
                    })
                }
            });
        }
    </script>
}
<div id="divIndex" class="easyui-layout" style="width:auto; height: auto; margin-left: auto; margin-right: auto">
    <div class="divIndexTop clearfix" data-options="region:'north',noheader:true,split:false,collapsible:false" style="height: 60px; background-color: rgba(228, 242, 251, 0.5); overflow: hidden; ">
        <div class="titleBox" style="width:80%;float:left;">
            <h4 class="systemTitle clearfix">
                <img src="~/Images/MyIcon/icon_120.png" alt="icon120" style="height:40px;width:auto;float:left;margin-top:10px;" />
                &nbsp; &nbsp;
                <span style="float: left; color: #fff; padding-left:5px;">上海市医疗急救中心院前急救平台</span>
            </h4>
        </div>
        <div class="btnBox" style="width:20%;float:right;">
            <p class="userInfoBox" style="margin-right:15px;">当前用户：<span class="userName" style="color:darkblue">@ViewBag.UserName</span></p>

            <p class="exitLoginBox">
                <img src="~/Images/LoginIcon/exit.png" title="点击退出系统" style="height:16px; width:16px; cursor:pointer;vertical-align:middle" onclick="goLogin()" />
            </p>
        </div>
    </div>
    <div data-options="region:'west',title:'菜单导航',split:false" style="width:180px;height:30px;">
        <ul id="menuTree"></ul>
    </div>
    <div id="divIndexMain" data-options="region:'center'" style="padding: 5px; background: #E4F2FB;">
        <!--tab容器-->
        <div class="easyui-tabs" id="tbs" data-options="fit:true,border:false">
            @*id="tbs"*@
        </div>
    </div>
</div>
<style>
    body {
        margin: 0 !important;
    }
    /*取消菜单导航下鼠标双击时文本被选中，文字背景变蓝色*/
    #menuTree {
        -moz-user-select: none; /*火狐*/
        -webkit-user-select: none; /*webkit浏览器*/
        -ms-user-select: none; /*IE10*/
        -khtml-user-select: none; /*早期浏览器*/
        user-select: none;
    }

    h4, p {
        margin: 0;
    }

    .titleBox, .btnBox {
        height: 58px;
        line-height: 58px;
        overflow: hidden;
    }

    .systemTitle {
        height: 58px;
        line-height: 58px;
        font-size: 20px;
        padding-left: 32px;
        font-weight: bold;
        font-family: MicrosoftYaHei-Bold;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 3px;
        color: #ffffff;
    }

    .btnBox p {
        display: inline-block;
        font-size: 16px;
    }
    /*伪元素清除浮动*/
    .clearfix {
        display: block;
        *zoom: 1;
    }

        .clearfix:after {
            clear: both;
            content: ".";
            display: block;
            height: 0;
            visibility: hidden;
        }
</style>
<style>
    /*easyui部分样式自定义*/
    .divIndexTop {
        background-color: #0984e3 !important;
        background: -webkit-linear-gradient(to bottom right, #0984e3, #32B9F9);
        background: -o-linear-gradient(to bottom right, #0984e3, #32B9F9);
        background: -moz-linear-gradient(to bottom right, #0984e3, #32B9F9);
        background-image: linear-gradient(to bottom right, #0984e3, #32B9F9);
    }

    #divIndexMain {
        background-color: #f3f4f8 !important;
    }

    .userInfoBox {
        color: #cdddeb;
    }

        .userInfoBox .userName {
            color: #fff !important;
        }

    .tree-node-selected {
        background: #D2EBFF !important;
        color: #333 !important;
    }

    .tree-node-hover {
        background: #D2EBFF !important;
        color: #333 !important;
    }
</style>